<template>
  <VueEchart :option="options" style="width: 100%;height: 11px;" />
</template>
<script>
import VueEchart, { echarts } from "./VueEchart";
export default {
  name: "WarningProgress",
  components: {
    VueEchart
  },
  props: {
    value: {
      type: Number,
      default: 50
    },
    total: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {};
  },
  computed: {
    options() {
      const total = this.total;
      const currentVal = this.value;
      const list = [{ name: "盐田河右三支", value: currentVal }];
      const yAxisData = list.map(item => item.name);

      var option = {
        // backgroundColor: 'black',
        grid: {
          top: "0%",
          bottom: "0%",
          right: "0%",
          left: "0%"
        },
        xAxis: {
          max: total,
          splitLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          axisLine: { show: false }
        },
        yAxis: [
          {
            data: yAxisData,
            inverse: true,
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: {
              show: false
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14,
                color: "#48D2FE"
              }
            }
          }
        ],
        series: [
          {
            //内
            type: "bar",
            barWidth: 6,
            silent: true,
            itemStyle: {
              borderColor: "#005687",
              borderRadius: [3, 0, 0, 3],
              color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                { offset: 0, color: "#0094FF" },
                { offset: 1, color: "#02E1FF" }
              ])
            },
            barGap: 150,
            barCategoryGap: 20,
            data: list,
            showBackground: true,
            backgroundStyle: {
              color: "#F7525A ",
              borderColor: "#F7525A",
              borderRadius: 3
            }
          },
          {
            data: [total]
          }
        ]
      };

      return option;
    }
  },
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {}
};
</script>
<style lang="scss" scoped></style>
